<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠</title>
        <script src="jquery.js"></script>
        <style>
            body{
                background-image:url("image/bg.jpg");  
                /*自定义cursor时需加auto  */
                cursor: url("image/cursor.png") ,auto;
                -moz-user-select: none;
                margin: 0;
                          
                }
            table{
               width:600px;
               height:600px;
               border:solid 0 blue;
               /*居中*/
               margin:0 auto;                                             
                 }
            td{
                border:solid 0px blue;
                background-image:url("image/hole.png");
                background-repeat:no-repeat;
                background-size:146px 50px;
                background-position:center bottom;
                width :150px;
                height: 150px;
                text-align: center;
                /*align只有三个值*/
                vertical-align: bottom;                              
                                                              
              }
              img{
                  width: 60%;
                  height: 0;
                  margin-bottom: 15px;         
                                   
                 }
                 /*做动画*/
                 /*只有两贞动画，*/
                 @keyframes mouseDown{
                     0%{height: 90px;                         
                     }
                     100%{height: 0;                         
                     }                     
                 }
                 @keyframes mouseUp{
                     0%{height:0;                         
                     }
                     100%{height:90px;                         
                     } 
                 }  
                 .down{
                    animation-name:mouseDown;
                    animation-duration:0.2s;
                    animation-fill-mode:both;
                      }
               
                  .up{
                    animation-name:mouseUp;
                    animation-duration:0.8s;
                    animation-fill-mode:both;
                    border-top-right-radius: 20px;
                    
                    }
                    p{
                        position:absolute;
                        font-size: 30px;
                        background-color: lightcoral;
                        padding:5px 20px 2px 25px;
                        border-top-right-radius: 20px;
                        border-bottom-right-radius: 20px;
                        
                        
                    }
        </style>
	</head>
	<body> 
        <audio src="audio/music.mp3" autoplay loop></audio>        
        <audio src="audio/dazhong.wav" id="dazhong"></audio>   
        <p id="score">得分：0</p> 
        <table>     
           <!--<tr是行。td是每一个小格子单元  --->  
          <tr>              
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
          </tr>
          <tr>              
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
          </tr>        
          <tr>              
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
              <td><img  src="image/mouse.png"></td>
          </tr>
          <tr>              
              <td><img src="image/mouse.png"></td>
              <td><img src="image/mouse.png"></td>
              <td><img src="image/mouse.png"></td>
              <td><img src="image/mouse.png"></td>
          </tr>
      <body>  
                      
      <script>
        var mouses =$("img");
        var score = 0;
         score+=10; 
        function show(){
            // 可以为0但不可为1
            var i = Math.floor(Math.random()*16);
            var m = mouses[i];
            $(m).addClass("up").removeClass("down");
           function hide(){
                 $(m).addClass("down").removeClass("up");  
                           }
                 setTimeout(hide,5000);
                       }
                 function showMany(){
                       
                    show();
                    show();
                    show();                  
                    
                       }                    
              setInterval(showMany,2000);
               $(mouses).click(function(){
                   $(this).addClass("down").removeClass("up");
                   $("#dazhong")[0].load;
                   $("#dazhong")[0].play();
                     score+=10;                  
                                                                          
                   $("#score").text("得分:"+score);
               });
            // function show(){
             // 可以为0但不可为1
            // var i = Math.floor(Math.random()*16);
            // var m = mouses[i];
            // $(m).addClass("up").removeClass("down");
            // function hide(){
            //      $(m).addClass("down").removeClass("up");  
            // }
            // setTimeout(hide,2500);
            //         }
            //         setInterval(show ,2000);
            // function show(){
            // // 可以为0但不可为1
            // var i = Math.floor(Math.random()*16);
            // var m = mouses[i];
            // $(m).addClass("up").removeClass("down");
            // function hide(){
            //      $(m).addClass("down").removeClass("up");  
            // }
            // setTimeout(hide,2500);
            //         }
            //         setInterval(show ,2000);
       
         $("body").mousedown(function(){
            $(this).css("cursor","url('image/cursor-down.png'),auto");
            
        });
         $("body").mouseup(function(){
            $(this).css("cursor","url('image/cursor.png'),auto");
              });                   
      </script>
      <script src="plugin.js"></script>
      </html>